<template>
  
  <div class="my-nav-container">
    <hr>
    <div class="my-nav-container1">
    <nav>
    <RouterLink 
    v-for="i in collectionNavlist"
    :key="i.id"
    :to="i.path"
    
    @click="channel = i"
    > 
    <div class="item">
      <span :class="channel === i ? 'selected' : 'unselected'">
         {{ i.name }} 
      </span>
    </div>
    </RouterLink>
    </nav>
    </div>    

    <div class="my-nav-container-collection">
      <transition name="slide">
       <RouterView /> 
      </transition>
      
    </div>
    
    
  </div>
</template>

<script setup>
import {ref} from 'vue';
import {RouterLink} from 'vue-router';
import {RouterView} from 'vue-router';
const collectionNavlist =ref([
  { id: 1, name: '笔记・607', path:'/myself/collection/notes'},
  { id: 2, name: '专辑・0', path:'/myself/collection/zhuanji'},
])
const channel = ref (collectionNavlist.value[0]);
// const channel = ref([{ id: 1, name: '笔记', path:'/myself/collection/notes'}]);
</script>

<style scoped>
.my-nav-container1{
  width:inherit;
  height: 72px;
  padding: 16px 0px;
  border:0.1px 0 0 0 ;
  
}

.item{
  display: flex;
  float: left;
  padding: 0 16px;
  height: 40px;
  font-size: 16px;

}
.item span{
  display: flex;
  width: 100%;
  padding: 0 16px;
  align-items: center;
  justify-content: center;
}


.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s ease;
}

.slide-enter-from{
  transform: translateX(100%); /* 向右滑动 */
}
.slide-leave-to{
  transform: translateX(-100%);
}

</style>
